<template>
  <div class="app-container customer-detail">
    <el-card>
      <div slot="header">
        <span>已经添加1个员工</span>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary" :underline="false">小呆</el-link>
      </div>
      <div class="el-flex algin-top" style="padding:20px 20px 0 20px">
        <el-avatar shape="square" :size="64" :src="squareUrl" style="margin-right:20px"></el-avatar>
        <div class="el-flex-1">
          <div class="el-p-t-5"><span class="el-font-bold-600">Phantom</span></div>
          <div style="margin-top:20px">客户评分：0 积分评分：0</div>
        </div>
        <div>
          <el-button type="primary" plain size="small">合并客户</el-button>
          <el-button type="primary" plain size="small">拨打电话</el-button>
          <el-button type="primary" plain size="small">修改评分</el-button>
          <el-button type="primary" plain size="small">添加事件</el-button>
          <el-button type="primary" plain size="small">添加跟进</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px ">
        <div>企业标签：<el-button type="text" icon="el-icon-edit" size="small">编辑</el-button>
        </div>
        <div class="el-p-t-10">个人标签：<el-button type="text" icon="el-icon-edit" size="small">编辑</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="el-p-l-20 el-p-r-20 el-p-b-20 el-flex">
        <div class="el-flex-1 el-font-16 el-font-bold-600"><i class="el-icon-s-shop"></i>大企业</div>
        <el-button type="text" size="small">更换企业 <i class="el-icon-arrow-right"></i></el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="客户概括" name="1">
          <div class="el-p-15">
            <el-row :gutter="10">
              <el-col :span="15">
                <div class="el-p-b-10"><i class="el-icon-user-solid"></i>添加客服信息</div>
                <table border="1" class="table1">
                    <tr>
                        <td>所属员工</td>
                        <td>客户来源</td>
                        <td>添加时间</td>
                        <td>最近沟通时间</td>
                    </tr>
                    <tr>
                        <td>daidai</td>
                        <td>-</td>
                        <td>2021-12-31 16:50</td>
                        <td>-</td>
                    </tr>
                </table>
                <div class="el-p-b-10 el-p-t-20"> <i class="el-icon-s-flag"></i>基本信息 <el-divider direction="vertical"></el-divider>
                <span class="el-font-12 el-font-bold-300">所属员工可在「侧边栏-客户画像」中进行编辑</span>
                </div>
                <table border="1" class="table">
                  <tr>
                    <td>性别</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    <td>地址</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                  </tr>
                  <tr>
                    <td>年龄</td><td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    
                    <td>生日</td>
                    <td><el-date-picker
                         size="small"
                        v-model="form.birth"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker></td>
                  </tr>
                  <tr>
                    <td>描述</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    <td>地址</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                  </tr>
                  <tr>
                    <td>电话</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    <td>职位</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                  </tr>
                  <tr>
                    <td>QQ</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    <td>来源</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                  </tr>
                  <tr>
                    <td>企业</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                    <td>微博</td>
                    <td><el-input v-model="form.sex" placeholder="" size="small"></el-input></td>
                  </tr>
                </table>
                <div class="el-p-t-20">
                    <div style="line-height:1"><i class="el-icon-edit"></i> 自定义信息</div>
                </div>
                <el-divider></el-divider>
              </el-col>
              <el-col :span="9"></el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="客户动态" name="2">
            <div class="el-p-20">
                 <el-steps direction="vertical" :active="1">
                    <el-step  icon="el-icon-collection-tag">
                        <div slot="title">
                            <div class="el-font-bold-600 el-font-14">星期四 2022-01-06</div>
                            <div class="el-font-bold-200 el-font-12">10:06</div>
                        </div>
                        <div slot="description" class="statusBox">
                            <h3>添加标签</h3>
                            <div class="el-m-t-10">
                                员工<span class="el-font-bold-600">♚小 呆。。</span  > 给Ta添加了标签 <span class="el-font-bold-600">「大客户」</span>
                            </div>
                        </div>
                    </el-step>
                </el-steps>
            </div>
        </el-tab-pane>
        <el-tab-pane label="聊天记录" name="3">
            <div class="el-p-20"></div>
        </el-tab-pane>
        <el-tab-pane label="所在群聊" name="4">
            <div class="el-p-20">
                <el-table :data="data"  style="width: 100%"  
                    size="small"
                    :header-cell-style="{'background':'#fafafa'}"	>
                    <el-table-column   prop="prop"    label="群名称" > </el-table-column>
                    <el-table-column   prop="prop"    label="群主" > </el-table-column>
                    <el-table-column   prop="prop"    label="群人数" > </el-table-column>
                    <el-table-column   prop="prop"    label="客户入群时间" > </el-table-column>
                    <el-table-column   prop="prop"    label="状态" > </el-table-column>
                    <el-table-column   prop="prop"    label="创建时间" > </el-table-column>
                    <el-table-column   prop="prop"    label="操作" > </el-table-column>
                    <div slot="empty">
                        <el-empty></el-empty>
                    </div>
                </el-table>
            </div>
        </el-tab-pane>
        <el-tab-pane label="商机" name="5">
            <el-empty description="暂无商机"> 
              <el-button type="primary" size="small">新建商机</el-button></el-button>
            </el-empty>
        </el-tab-pane>
        <el-tab-pane label="订单" name="6">
            <el-empty description="暂无订单"> 
              <el-button type="primary" size="small">新建订单</el-button></el-button>
            </el-empty>
        </el-tab-pane>
      </el-tabs>
      
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      activeName: '1',
      form:{}
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style lang="scss">
.customer-detail {
  .el-card__body {
    padding: 0;
  }
  .algin-top {
    align-items: flex-start;
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }
  .table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-collapse: collapse;
    font-size: 12px;
    border: 0px;

    tr {
      height: 40px;

      td {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;

        &:nth-of-type(2n + 1) {
          background: #fafafa;
          font-family: "Microsoft YaHei";
          font-weight: 600;
        }
      }
    }
  }
  .table1 {
    width: 100%;
    border: 1px solid #ebeef5;
    border-collapse: collapse;
    font-size: 12px;
    border: 0px;

    tr {
      height: 40px;
      &:nth-of-type(2n + 1) {
          background: #fafafa;
          font-family: "Microsoft YaHei";
          font-weight: 600;
        }
      td {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;

        
      }
    }
  }
  .statusBox{
    padding: 16px 20px;
    border: 1px solid #d0e8ff;
    border-radius: 2px;
    background: #f6fbfe;
    max-width: 70%;
    display: inline-block;
    margin: 10px 20px 20px 0;
    h3{
        margin: 0;
    }
  }
}
</style>